import React, { Component } from 'react'
import PropTypes from 'prop-types' // yarn add prop-types 安装类型限制的插件
import Item from '../Item';
import './index.css'

export default class List extends Component {


     // 对接收的Props进行：类型、必要性的限制
     static propTypes = {
        todos:PropTypes.array.isRequired,
        updatetodo:PropTypes.func.isRequired,
        deleteTodo:PropTypes.func.isRequired,
    }

    render() {
        const { todos,updatetodo,deleteTodo } = this.props
        
        return (
            <ul className="todo-main">
             {
                 todos.map((todo) =>{
                    return  <Item key={todo.id} {...todo} updatetodo={updatetodo} deleteTodo={deleteTodo} />
                 })
             }
          </ul>
        )
    }
}
